<template>
	<view class="item-wrapper" @click="goCategory(item._id,item.name)">
		<view class="update">
			{{DateConvert(item.updateTime)}}更新
		</view>
		<image :src="item.picurl" mode="aspectFill"></image>
		<view class="title">
			{{item.name}}
		</view>
	</view>
</template>

<script setup>
	defineProps({
		item:{
			type:Object,
			default:{
				name:"默认名称",
				picurl:"/assets/preview_small.webp",
				updateTime:""
			}
		}
	})
	// 日期计算
	const DateConvert = (timestamp)=>{
		const currentTime = new Date().getTime();
		  const timeDiff = currentTime - timestamp;
		  if (timeDiff < 60000) {  
		    return '1分钟内';
		  } else if (timeDiff < 3600000) {
		    return Math.floor(timeDiff / 60000) + '分钟';
		  } else if (timeDiff < 86400000) {
		    return Math.floor(timeDiff / 3600000) + '小时';
		  } else if (timeDiff < 2592000000) {
		    return Math.floor(timeDiff / 86400000) + '天';
		  } else if (timeDiff < 7776000000) {
		    return Math.floor(timeDiff / 2592000000) + '月';
		  } else {
		    return '1分钟内';
		  }
	}
	
	// 跳转分类页面
	const goCategory = (id,name)=>{
		uni.navigateTo({
			url:`/pages/category/category?id=${id}&name=${name}`
		})
	}
</script>

<style lang="scss" scoped>
.item-wrapper{
	position: relative;
	width: 219rpx;
	height: 342rpx;
	overflow: hidden;
	border-radius: 12rpx;
	view{
		position: absolute;
		z-index: 1;
		backdrop-filter: blur(20rpx);
		&.update{
			background-color:rgba(250,129,90,0.7);
			color: #fff;
			font-size: 22rpx;
			padding:6rpx 20rpx;
			left: 0rpx;
			top: 0rpx;
			border-bottom-right-radius: 12rpx;
			transform-origin: left top;
			transform: scale(0.8); 
		}
		&.title{
			width: 100%;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			color: #fff;
			font-size: 30rpx;
			background-color: rgba(0,0,0,0.2);
			bottom: 0rpx;
			left: 0rpx;
			font-weight: 600;
		}
	}
	image{
		width: 100%;
		height: 100%;
	}
}
</style>